<template>
    <section style="display:table; width:100%; margin:0 auto;">
        <el-col align="right">
            <div class="section">
                <span style="float:left; line-height:32px;font-size:24px; font-weight:bold; color:#333;">{{reportData.check_unit}}检查报告</span>
                <el-button
                        type="primary"
                        :disabled="dowFileStatus"
                        :loading="dowFileStatus"
                        @click="dowCheckReportFile"
                >下载检查报告</el-button>
                <el-button
                        :type="reportData.check_report_status == '0' || reportData.check_report_status == '2' ? 'primary' : 'info'"
                        :disabled="reportData.check_report_status != '0' && reportData.check_report_status != '2'"
                        @click="submit"
                >提交</el-button>
                <el-button type="primary" plain @click="cancel">返回</el-button>
                <br>
                <br>
            </div>
        </el-col>

        <el-col>
            <div class="section">
                <div class="head-item">
                    <div class="head-val">高校名称</div>
                    <div class="head-title">{{reportData.check_unit}}</div>
                </div>
               <!-- <div class="head-item">
                    <div class="head-title">检查结果</div>
                    <div class="head-val">
                        <img :src="'/assets/images/'+ dict.check_result_level[reportData.check_result_preview]"/>
                    </div>
                </div>-->
                <div class="head-item">
                    <div class="head-val">检查组组长</div>
                    <div class="head-title">{{reportData.group_user_name}}</div>
                </div>
                <div class="head-item">
                    <div class="head-val">检查组专家</div>
                    <div class="head-title">
                        <span v-for="user in reportData.check_user" v-if="user.full_name != reportData.group_user_name">{{user.full_name}}</span>
                    </div>
                </div>
                <div class="head-item">
                    <div class="head-val">检查项数量</div>
                    <div class="head-title">{{formatItemCount()}}
                    </div>
                    <!--<div class="head-val" style="margin-left: 20px">
                        <span class="cyc cyc-margin cyc-green">&nbsp;</span>
                        <span>{{reportData.check_item_very_count}}</span>
                    </div>
                    <div class="head-val">
                        <span class="cyc cyc-margin cyc-orange">&nbsp;</span>
                        <span>{{reportData.check_item_con_count}}</span>
                    </div>
                    <div class="head-val">
                        <span class="cyc cyc-margin cyc-red">&nbsp;</span>
                        <span>{{reportData.check_item_uncount}}</span>
                    </div>-->
                </div>
            </div>
        </el-col>


        <el-col>
            <div class="body-item" v-if="reportData.suggestion">
                <div class="body-title">综合意见</div>
                <div style="padding:15px 0 0" >
                    <el-input
                        :autosize="true"
                        type="textarea"
                        v-model="reportData.suggestion"
                        resize="none"
                        class="showTextConter"
                        readonly>
                   </el-input>
            </div>
            </div>
        </el-col>

        <el-col>
            <div class="body-item">
                <div class="body-title" v-if="reportData.check_item_desc == []">检查项</div>

                <div v-for="item in reportData.check_item_desc" class="body-inspect">
                    <div class="inspect-title">
                       <!-- <span :class="'cyc cyc-' + formatCyc(item.check_content_status)"></span>
                        <span class="star">{{ formatStar(item.star_level) }}</span>-->
                        <span>{{item.check_item_three_order_number + '.&nbsp;' + item.check_item_three}}</span>
                    </div>
                    <div class="inspect-info">
                        <div class="info-title">图片</div>
                        <div class="info-img">
                            <img v-for="img in item.image_list" :src="fixUrl(img.path || img.url)"/>
                        </div>
                    </div>
                    <hr style="height:1px;border:none;border-top:1px solid #f8f8f8; margin-top:20px;" />
                    <div class="inspect-info">
                        <div class="info-title">楼宇 - 房间号</div>
                        <div style="padding:10px 0 10px;">
                            <el-tag  v-for="(lab, index) in item.building_room" :key="index" type="success" style="margin-right:15px;">{{lab.building}}</el-tag>
                        </div>
                    </div>
                    <hr style="height:1px;border:none;border-top:1px solid #f8f8f8; margin-top:20px;" />
                    <div class="inspect-info">
                        <div class="info-title">描述信息</div>
                        <div class="info-item">
                            <el-input
                                    class="border-none check-preview showTextConter"
                                    disabled
                                    :autosize="true"
                                    type="textarea"
                                    resize="none"
                                    v-model="item.desc">
                            </el-input>
                        </div>
                    </div>
                </div>

            </div>
        </el-col>


        <!--对话框-显示大图-->
        <el-dialog title="显示大图" :visible.sync="big_img_dialog.show">
            <img class="big-img" :src="big_img_dialog.path">
        </el-dialog>
    </section>
</template>

<script>
    import * as api from '../../api/report_api';
    import {createNoticeFile} from '../../api/report_manager_api'
    import dict from '../../common/js/dict';
    import { saveAs } from '../../common/js/commons';

    export default {
        props: ["id", 'resource_url', "receiverCount", "tempData"],
        data() {
            return {
                dict: dict,
                loading: false,
                dowFileStatus: false,
                big_img_dialog: {
                    show: false,
                    path: ''
                },
                //表格数据
                reportData: {}
            }
        },
        methods: {
            showImg(path) {
                this.big_img_dialog.path = this.fixUrl(path);
                this.big_img_dialog.show = true;
            },
            cancel() {
                this.reportData = {}
                this.$emit("closeDialog");
            },
            dowCheckReportFile(){
                this.dowFileStatus = true
                let params = {
                    id: this.id,
                    type:1
                }
                createNoticeFile(params).then((res) => {
                    if (res.data.status == 200) {
                        saveAs(res.data.datas,'')
                        this.dowFileStatus = false
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.dowFileStatus = false
                    }
                })
            },
            submit() {
                if(this.reportData.suggestion == null || this.reportData.suggestion == "") return  this.$message.error('综合意见不能为空')
                if(this.reportData.check_item_desc.length == 0) return  this.$message.error('检查项数量不能为0')
                let checkStatus = false;
                this.reportData.check_item_desc.map((item, index) => {
                    if (item.desc == "") {
                        checkStatus = true;
                        this.$message.error('检查项'+ item.check_item_three_order_number + '描述信息不能为空')
                    }
                    return false
                })
                if(checkStatus) return false;
                this.$confirm('报告提交后不可撤回，确认提交此报告吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,   //不通过点击遮罩关闭弹框
                    type: 'info'
                }).then(() => {

                    let params = {
                        id: this.id,
                        suggestion: this.reportData.suggestion,
                        check_item_desc: this.reportData.check_item_desc,
                        deleted_desc_id: this.reportData.deleted_desc_id,
                        check_status: "1"
                    };

                    api.updateReport(params).then((res) => {
                        if (res.data.status == 200) {

                            let sub_params = {
                                id: this.id,
                                check_status: "1"
                            }

                            api.submitReport(sub_params).then((res) => {
                                if (res.data.status == 200) {

                                    this.$message({
                                        type: 'success',
                                        message: '提交报告成功!'
                                    });

                                    this.$router.push('/report/list');


                                } else {
                                    if (res.data.status == 401) {
                                        this.$router.push('/login');
                                    }
                                    this.$message.error(res.data.msg);
                                }
                            });


                        } else {
                            if (res.data.status == 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.msg);
                        }
                    });

                }).catch((e) => {
                    /*this.$message({
                        type: 'info',
                        message: e.message
                    });*/
                });
            },
            formatCyc(status) {
                switch (status.toString()) {
                    case '0':
                        return 'red';
                    case '2':
                        return 'green';
                    case '1':
                    default:
                        return 'orange';
                }
            },
            formatStar(cnt) {
                switch (cnt) {
                    case '1':
                        return '★';
                    case '2':
                        return '★★';
                    case '3':
                        return '★★★';
                    case '0':
                    default:
                        return '';
                }
            },
            fixUrl(url) {
                if (url && url.length > 0 && url.toLowerCase().indexOf("http:") != 0) {
                    return this.resource_url + url;
                }
                return url;
            },
            formatItemCount() {
                return parseInt(this.reportData.check_item_uncount) + parseInt(this.reportData.check_item_con_count) + parseInt(this.reportData.check_item_very_count);
            },
            //初始化页面
            initData() {
                let params = {
                    id: this.$route.params.id
                };

                api.getReportDetail(params).then((res) => {
                    if (res.data.status == 200) {
                        let data = JSON.parse(res.data.datas);


                        data.check_item_desc = data.check_item_desc.sort(function (a, b) {
                            return a.check_item_three_item_order - b.check_item_three_item_order;
                        });
                        this.reportData = data;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
                //this.reportData = this.tempData;
            }
        },
        watch: {
            receiverCount(cur) {
                this.initData();
            },
            tempData(cur) {
                this.reportData = cur;
            },

        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>
    .head-item {
        margin-bottom: 15px;
        text-align: left;
    }

    .head-title {
        color: #000;
        display: inline-block;
        text-align: right;
        margin-right: 10px;
        font-weight: bold;
    }
    .head-title span {
        margin:0 10px 0 0;
    }

    .head-val {
        display: inline-block;
        color: #666;
        line-height:10px;
        width: 80px;
    }

    .head-val span {
        margin-right: 10px;
    }

    .section {
        margin-top: 15px;
        padding-bottom: 15px;
        border-bottom: solid 1px #ccc;
    }

    .cyc {
        border-radius: 5px;
        width: 10px;
        height: 10px;
        display: inline-block;
        display: -webkit-inline-box;
    }

    .cyc-margin {
        margin: 0 5px 0 10px;
    }

    .cyc-green {
        background-color: #7ED321;
    }

    .cyc-orange {
        background-color: #F5A623;
    }

    .cyc-red {
        background-color: #D0021B;

    }

    .body-item {
        color: #000;
        margin-top: 25px;
    }

    .body-title {
        color: #000;
        margin-top: 10px;
        font-weight: bold;
    }

    .body-val {
        margin-top: 10px;
        border: solid 1px #ccc;
        padding: 10px;
        min-height: 50px;
    }

    .body-inspect {
        margin-top: 10px;
        border: solid 1px #f8f8f8;
        padding:30px 30px 30px 40px;
        margin-bottom: 15px;
    }

    .inspect-title {
        color: #000;
    }

    .inspect-title span{
        color: #000;
        font-size:16px;
    }

    .star {
        margin: 0 3px;
    }

    .inspect-info {

    }

    .info-title {
        color: #333;
        margin-top: 25px;
    }

    .info-img,
    .info-item {
        margin-top: 10px;
        line-height:40px;
    }

    .info-img img {
        cursor: pointer;
        height: 75px;
        width: 75px;
        margin-right: 15px;
        display: inline-block;
    }

    .info-item {
        color:#666;
    }

    .big-img {
        max-width: 100%;
    }

</style>
<style>
    .border-none.check-preview.el-textarea.is-disabled .el-textarea__inner{
        background:#fff;
        padding-left:0;
        color:#666;
        margin-top:-7px;
    }
</style>
